<template>
    <!--  图册管理的  缩略图组件横向列表-->
    <div class="all">
        <!--        上面总计多少条-->
        <div class="total">
            <img src="../../assets/images/Shape@2x.png" alt="">
            <p>总计：{{this.$store.state.total}}条记录</p>
        </div>
        <!--        横向列表之说明-->
        <div class="trans">
            <ul class="landscape">
                <li>序号</li>
                <li>文件名称</li>
                <li>缩略图</li>
                <li>页数</li>
                <li>来源</li>
                <li>大小</li>
                <li>时间</li>
                <li>类型</li>
                <li>操作</li>
            </ul>
            <!--                加载中-->
            <div v-if="visable">
                <a-spin tip="Loading...">
                    <div class="spin-content">
                    </div>
                </a-spin>
            </div>

            <!--        <div style="clear:both"></div>-->
            <!--      横向列表之具体内容  -->
            <ul class="detail" v-for="(item,index) in newList" :key="index" v-else  style="cursor: default">
                <!--                重命名-->
                <li>{{index+1}}</li>
                <li>{{item.fileName}}</li>
                <li><img :src="`data:image/gif;base64,${item.thumbnail}`" alt=""></li>
                <li>{{item.pageNumber}}</li>
                <li>{{item.operator}}</li>
                <li>{{item.fileSize}}</li>
                <li>{{item.createDate}}</li>
                <li>图集</li>
                <li>
                    <div> <router-link :to="{path:'/galDateView',query:{atlasId:item.id,newItem:item}}">查看</router-link></div>
                    <div></div>
                    <div @click="chong(item.id)">重命名</div>
                    <div></div>
                    <div ><a :href="`http://172.16.193.8:8856/qbservices/minio/download?connectionType=3&fileName=${item.fileName}&id=${item.id}`">下载</a></div>
                    <div></div>
                    <a-button type="dashed"  @click="del(item.id)" class="btn" >
                        删除
                    </a-button>

                </li>
            </ul>
            <a-modal
                    v-model="visible"
                    title="提示"
                    cancelText="取消"
                    okText="确认"
                    @ok="handleOk"
            >
                <p>您确定要删除吗</p>
            </a-modal>
        </div>
        <div class="changename" v-show="this.chongvis==true">
            <div>
                <div>
                    <span>重命名</span>
                    <input type="text" v-model="value">
                </div>
                <a-button type="primary" class="btn1" @click="cheng">
                    确认
                </a-button>
                <a-button class="btn1" @click="quxiao">取消</a-button>
            </div>
        </div>
        <!--        下面的共多少条数据，第多少页-->
        <div class="paging">
            <p>共<span>{{this.$store.state.total}}</span>条数据，第 {{this.$store.state.pageNum}}/{{Math.ceil(this.$store.state.total /7)}} 页</p>
            <!--            分页-->
            <!--            分页-->
            <a-pagination :current="this.$store.state.pageNum" :total="(Math.ceil(this.$store.state.total / 7)*10)" @change="onChange" />
        </div>
    </div>
</template>

<script>
    import {changeNameGal, delGallery, getAllGalList} from "../../api/api";
    // import axios from "axios"

    export default {
        data() {
            return {
                visable:true,
                current: 1,
                value:'',
                visible: false,
                id :'',
                ta:"",
                // newList:[],
                // arrList:[],
                // newVal:[],
                cha:"",
                chongvis:false,
            }
        },
        created() {
            this.visable = false
        },
        computed:{
            newList(){
                return this.$store.state.galleryList
            }
        },
        updated() {
            // console.log(Number(this.$store.state.total))
            this.ta=Number(this.$store.state.total)

        },
        watch:{
        },
        methods: {
            // 分页
            onChange(current) {
                this.current = current;
                this.$store.commit("changePageNum",this.current)
                getAllGalList(this.current,7,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                    this.$store.commit("changeGalList",res.page.list)
                    this.$store.commit("changeTotal",res.page.total)
                })
            },
            // 删除
            del(id){
                this.id = id
                this.visible = true
            },
            handleOk() {
                delGallery(this.id).then(res=>{
                    console.log(res)
                    getAllGalList(this.current,7,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                        this.$store.commit("changeGalList",res.page.list)
                        this.visible = false
                        this.$store.commit("changeTotal",res.page.total)
                        this.$message.success('删除成功');
                    })
                })
            },
            handleCancel(e) {
                console.log(e);
                this.visible = false;
            },
            // 下载

            // 重命名
            chong(id){
                this.id=id;
                this.chongvis=true
                console.log(this.id)
            },
            cheng(){
                if(this.value === ""){
                    alert("请输入要修改的名字")
                }else{
                    changeNameGal(this.id,this.value).then(res=>{
                        console.log(res)
                        getAllGalList(this.current,7,this.$store.state.obj.fileType,this.$store.state.obj.name,this.$store.state.obj.startTime,this.$store.state.obj.endTime).then(res=>{
                            this.$store.commit("changeGalList",res.page.list)
                            this.chongvis=false

                            this.$store.commit("changeTotal",res.page.total)
                            this.value=''
                        })
                    })
                }
            },
            //点击取消，影藏
            quxiao(){
                this.chongvis=false
            },
        },
    }
</script>

<style scoped lang="less">
    * {
        /*box-sizing: border-box;*/
        padding: 0;
        list-style: none;
    }
    .ant-btn{
        padding: 0;
        box-shadow: none;
        height: 22px;
    }
    .ant-btn-dashed{
        color: rgba(249, 60, 60, 1);
        border: none;

    }
    .ant-btn-dashed:hover, .ant-btn-dashed:focus {
        color: rgba(249, 60, 60, 1);
        background-color: #fff;
        border-color: #fff;
    }
    .all {
        width: 1088px;
        height: 640px;
        /*border-top: 1px solid #E9E9E9;*/
        /*border-bottom:1px solid #E9E9E9;*/
        /*padding-bottom: 8px;*/
        margin-top: 16px;
        position: relative;

        .total {
            margin-top: 16px;
            width: 1088px;
            height: 40px;
            overflow: hidden;
            background: #E6F7FF;
            border: 1px solid #BAE7FF;
            border-radius: 4px;
            img {
                width: 14px;
                height: 14px;
                /*background: #1890FF;;*/
                float: left;
                margin: 13px 8px 13px 16px;
            }

            p {
                width: 112px;
                height: 22px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                line-height: 22px;
                float: left;
                margin-top: 9px;
            }
        }

        .landscape {
            width: 1088px;
            height: 54px;
            overflow: hidden;
            padding: 0;
            background: #FAFAFA !important;
            border-radius: 4px 4px 0px 0px;
            margin: 15px 0 0;

            li {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                background: #FAFAFA !important;
                color: rgba(0, 0, 0, 0.85);
                float: left;
                width: 96px;
                height: 56px;
                line-height: 56px;
                text-align: center;
            }

            li:nth-of-type(1) {
                width: 84px;
            }

            li:nth-of-type(2) {
                width: 182px;
            }

            li:nth-of-type(9) {
                width: 200px;
                float: right;
            }
        }

        /*  横向列表之具体内容  */

        .detail {
            width: 1088px;
            height: 54px;
            border-bottom: 1px solid #E8E8E8;
            text-align: center;
            line-height: 54px;
            overflow: hidden;
            margin-bottom: 0;
            padding: 0;

            img {
                width: 68px;
                height: 48px;
                line-height: 53px;
                margin-top: -3px;
            }

            li {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(0, 0, 0, 0.65);
                width: 96px;
                height: 54px;
                float: left;
            }
            li:nth-of-type(5){
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            li:nth-of-type(1) {
                width: 84px;
            }

            li:nth-of-type(2) {
                width: 182px;
            }

            li:nth-of-type(9) {
                width: 200px;
                float: right;
                div {
                    margin-top: 16px;
                    float: left;
                    height: 22px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #1890FF;
                    line-height: 22px;
                    padding-left: 8px;
                    padding-right: 8px;
                    cursor: pointer;
                }

                div:nth-of-type(2), div:nth-of-type(4), div:nth-of-type(6) {
                    padding: 0;
                    height: 14px;
                    width: 1px;
                    background: #E9E9E9;
                    margin-top: 20px;
                }

                div:nth-of-type(7) {
                    color: #F93C3C;
                }
            }

            li:nth-of-type(4), li:nth-of-type(6), li:nth-of-type(7) {
                text-decoration: underline;
            }
        }
    }

    /*分页*/
    .paging {
        position: absolute;
        bottom: 12px;
        width: 1088px;
        height: 64px;
        line-height: 34px;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        p {
            width: 164px;
            height: 22px;
            float: left;
            margin-top: 21px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            margin-bottom: 0;
        }
        .ant-pagination {
            margin-top: 16px;
        }

    }
    /*    重命名*/
    .changename {

        width: 360px;
        height: 180px;
        background: #FFFFFF;
        border: 1px solid #C3C1C1;
        border-radius: 4px;
        position: fixed;
        z-index: 100;
        top: 300px;
        left: 700px;
        text-align: center;
        div {
            margin-top: 40px;

            span {
                font-size: 14px;
                font-family: PingFangSC-Regular;
                color: rgba(0, 0, 0, 0.25);
                margin-right: 10px;
            }

            input {
                width: 214px;
                height: 32px;
                padding: 0 16px 0 16px;
                outline: none;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }
    }
    .spin-content {
        border: 1px solid #91d5ff;
        background-color: #e6f7ff;
        padding: 30px;
    }
    .btn1 {
        width: 64px;
        height: 32px;
        padding: 0;
        text-align: center;
        margin-right: 20px;
        margin-top: 20px;
    }
    .van-dialog{
        width: 590px!important;
        height: 260px!important;
        background-color: #fff;
        z-index: 1000;

    }
</style>
